<template>
  <div>
    <div class="search-h">
      <div>
        <a-form layout="inline" :form="queryParams">
          <a-form-item label="名称">
            <a-input v-model="queryParams.naem" placeholder="输入名称"></a-input>
          </a-form-item>
        </a-form>
      </div>
      <div>
        <a-button type="danger" @click="query"> 查询 </a-button>
        <a-button @click="reset"> 重置 </a-button>
      </div>
    </div>
    <div class="btn-group">
        <a-button @click="add"> 新增 </a-button>
        <a-button @click="del"> 删除 </a-button>
        <a-button> 重置 </a-button>
    </div>
    <a-table
      bordered
      :row-selection="{
        selectedRowKeys: selectedRowKeys,
        onChange: onSelectChange,
      }"
      :columns="columns"
      :data-source="data"
      :pagination="pageParams"
      @change="tableChange"
    >
      <template slot="status" slot-scope="rows, record">
        <a-switch :checked="record.status" @change="onChange($event, record)" />
      </template>
      <template slot="operation" slot-scope="rows, record" >
        <a-icon type="setting" theme="filled"  @click="edit(record)" style="color: #1890ff"/>
        <a-icon type="delete" theme="filled"  @click="del(record)"/>
      </template>
    </a-table>

    <!-- 新增-编辑 -->
    <a-modal v-model="visible" :title="title" @ok="handleOk" @cancel="handleCancel">
      <a-form-model layout="horizontal" :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <a-form-model-item label="名称">
          <a-input v-model="form.name" placeholder="请输入名称" />
        </a-form-model-item>
        <a-form-model-item label="联系电话">
          <a-input v-model="form.phone" placeholder="请输入联系电话" />
        </a-form-model-item>
        <a-form-model-item label="地址">
          <a-input v-model="form.address" placeholder="请输入地址" />
        </a-form-model-item>
        <a-form-model-item label="介绍">
          <a-input v-model="form.introduce" placeholder="请输入介绍" />
        </a-form-model-item>
        <a-form-model-item label="是否可用">
          <a-switch :checked="form.status"/>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
<script>
const columns = [
  {
    title: '名称',
    dataIndex: 'name'
  },
  {
    title: '联系电话',
    dataIndex: 'phone'
  },
  {
    title: '是否可用',
    key: 'status',
    scopedSlots: { customRender: 'status' },
    dataIndex: 'status'
  },
  {
    title: '介绍',
    dataIndex: 'introduce'
  },
  {
    title: '创建时间',
    dataIndex: 'createdTime'
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime'
  },
  {
    title: '操作',
    key: 'operation',
    scopedSlots: { customRender: 'operation' },
    dataIndex: 'operation'
  }
]

export default {
  data () {
    return {
      visible: false,
      title: '新增',
      queryParams: {
        name: ''
      },
      pageParams: {
        current: 1,
        pageSize: 10,
        total: 0,
        'show-size-changer': true
      },
      form: {
        status: false,
        introduce: '',
        address: '',
        phone: '',
        name: ''
      },
      data: [],
      columns,
      selectedRowKeys: [], // Check here to configure the default column
      loading: false
    }
  },
  created () {
    this.getList()
  },
  methods: {
    tableChange (page) {
      this.pageParams.pageSize = page.pageSize
      this.pageParams.current = page.current
      this.getList()
    },
    query () {
      this.getList()
    },
    reset () {
      this.queryParams = this.$options.data().queryParams
      this.getList()
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    // 增删改查
    onChange (falg, row) {
      row.status = falg
      // TODO:
    },
    add () {
      this.visible = true
      this.title = '新增'
    },
    edit (record) {
      this.visible = true
      this.title = '编辑'
      this.form = record
    },
    del (record) {
      let list = record.id ? [record.id] : this.selectedRowKeys

      this.$confirm({
        title: '提示',
        content: '确定删除操作数据?',
        onOk () {
          // TODO:
          console.log('🚀 ~ file: index.vue ~ line 136 ~ del ~ list', list)
        }
      })
    },
    handleOk () {
      // TODO:
    },
    handleCancel () {
      this.form = this.$options.data().form
    },
    // 接口
    getList () {
      // TODO:
      let params = { current: this.pageParams.current, pageSize: this.pageParams.pageSize, ...this.queryParams }

      const data = []
      for (let i = 0; i < 46; i++) {
        data.push({
          key: i,
          name: `Edward King ${i}`,
          phone: 32,
          status: true,
          createdTime: 'createdTime',
          updateTime: 'updateTime',
          operation: 'operation'
        })
      }
      this.data = data
      this.pageParams.total = data.length
    }
  }
}
</script>
<style lang="less" scoped>
.search-h{
  display: flex;
  justify-content: space-between;
  margin: 10px 0 8px;
  /deep/ .ant-form-item{
    margin-bottom: 0px !important;
  }
}
.btn-group{
  margin-bottom: 12px;
}
</style>
